<template>
	<page-meta>
	    <navigation-bar
			title="设备检修记录"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view class="layui-fluid">   
		<view class="uni-flex uni-row message" style="-webkit-justify-content: space-between;justify-content: space-between;">
			<view class="text">
				<button @click="showQueryOptions" size="mini"><text>查询</text></button>
			</view>
			<view class="text">
				<button @click="editRepairLogInfo" size="mini">编辑数据</button>
				<button type="warn" @click="deleteRepairLogInfo" size="mini" style="margin-left: 15px">删除数据</button>
			</view>
		</view>
		<uni-drawer ref="queryOptions" :width="300" @change="drawerChange">
		    <view style="padding:30rpx;">
				<view style="padding-bottom: 10px">
					<form @submit="queryFormSubmit">
						<view class="">
							<label class="uni-label">编号:</label>
							<input name="eid" placeholder="请输入" autocomplete="off" class="uni-input">
						</view>
						<view class="">
							<label class="uni-label">专业:</label>
							<xfl-select 
								:list="doMainList"
								:clearable="true"
								:showItemNum="5" 
								:listShow="false"
								:isCanInput="false"  
								:style_Container="'height: 50px; font-size: 16px;'"
								:initValue="''"
								:option="optionConf"
								@change="doMainChange($event)"
								@clear="doMainChange($event)"
								:selectHideType="'hideAll'"></xfl-select>
						</view>
						<view class="">
							<label class="uni-label">系统名:</label>
							<xfl-select
								ref="systemName"
								:list="systemNameList"
								:clearable="true"
								:showItemNum="5" 
								:listShow="false"
								:isCanInput="false"  
								:style_Container="'height: 50px; font-size: 16px;'"
								:initValue="''"
								:option="optionConf"
								@change="systemNameChange($event)"
								@clear="systemNameChange($event)"
								placeholder="请先选择专业"
								:selectHideType="'hideAll'"></xfl-select>
						</view>
						<view class="">
							<label class="uni-label">设备类型:</label>
							<xfl-select
								ref="eventType"
								:list="eventNameList"
								:clearable="true"
								:showItemNum="5" 
								:listShow="false"
								:isCanInput="false"  
								:style_Container="'height: 50px; font-size: 16px;'"
								:initValue="''"
								:option="optionConf"
								@change="eventNameChange($event)"
								@clear="eventNameChange($event)"
								placeholder="请先选择系统"
								:selectHideType="'hideAll'"></xfl-select>
						</view>
						<view class="">
							<label class="uni-label">车站:</label>
							<view class="layui-input-block">
								<xfl-select
									:list="stationNameList"
									:clearable="true"
									:showItemNum="5" 
									:listShow="false"
									:isCanInput="false"  
									:style_Container="'height: 50px; font-size: 16px;'"
									:initValue="''"
									:option="optionConf"
									@change="stationNameChange($event)"
									@clear="stationNameChange($event)"
									:selectHideType="'hideAll'"></xfl-select>
							</view>
						</view>
						<view class="">
							<label class="uni-label">工单状态:</label>
							<view class="layui-input-block">
								<xfl-select
									:list="statuList"
									:clearable="true"
									:showItemNum="5" 
									:listShow="false"
									:isCanInput="false"  
									:style_Container="'height: 50px; font-size: 16px;'"
									:initValue="''"
									:option="optionConf"
									@change="statuChange($event)"
									@clear="statuChange($event)"
									:selectHideType="'hideAll'"></xfl-select>
							</view>
						</view>
						<view class="">
							<label class="uni-label">开始时间</label>
							<input 
								name="startDate"
								ref="startDate" 
								:value="queryParam.startDate" 
								placeholder="请选择开始时间" 
								autocomplete="off" 
								class="uni-input"
								@click="showPop($event, 'startDate')"
								disabled >
						</view>
						<view class="">
							<label class="uni-label">结束时间</label>
							<view class="layui-input-inline">
								<i class="layui-icon layui-icon-date"></i>
								<input 
									name="endtDate"
									ref="endtDate" 
									:value="queryParam.endDate" 
									placeholder="请选择结束时间" 
									autocomplete="off" 
									class="uni-input"
									@click="showPop($event, 'endDate')"
									disabled>
							</view>
						</view>
						<view class="">
							<button form-type="submit">
								<uni-icons type="search" ></uni-icons>
								查询
							</button>
						</view>
					</form>
				</view>
		    </view>
			<minPopup heightSize="500" :show="show" @close='close'>
				<minPicker 
					:endTime="endTime" 
					:startTime="startTimes" 
					@cancel="cancel" 
					@sure="sure"></minPicker>
			</minPopup>
		</uni-drawer>
		<view class="dataTable">
			<z-table 
				:tableData="repairLogInfoList" 
				:columns="repairLogInfoTableColumns" 
				:textAlign="'center'" 
				:titleTextAlign="'center'"
				:singleSelect="true"
				:showSelect="true"
				@onSelect="tableSelect"></z-table>
		</view>
		<uni-fab
			horizontal="right"
			vertical="bottom"
			:popMenu='false'
			@fabClick="addButtonClick"
		></uni-fab>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog :type="'warn'" title="请确认" 
				content="是否确认删除选中的数据内容" 
				:before-close="true" 
				@confirm="dialogConfirm" 
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupMessage" type="message">
			<uni-popup-message type="message" message="删除成功" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>

import minPicker from '@/components/min-picker/min-picker.vue'
import minPopup from '@/components/min-picker/min-popup.vue'
import xflSelect from '@/components/xfl-select/xfl-select.vue'
import zTable from "@/components/z-table/z-table.vue"
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
import uniIcons from "@/components/uni-icons/uni-icons.vue"
import uniFab from '@/components/uni-fab/uni-fab.vue';

export default {
	name:'maintainRepairLogInfo',
	data () {
		return {
			queryParam: {
				eid: '',
				doMain: '',
				systemName: '',
				eventName: '',
				stationName: '',
				statu: '',
				startDate: '',
				endDate: ''
			},
			doMainList: [],
			systemNameList: [],
			eventNameList: [],
			stationNameList: [],
			statuList: [],
			optionConf: {
				label: 'label',
				value: 'value'
			},
			repairLogInfoList: [],
			repairLogInfoTableColumns: [
				{
					title: '工单号',
					key: 'taskNum',
					width: 200
				},
				{
					title: '站点名称',
					key: 'stationName',
					width: 150
				},
				{
					title: '专业名称',
					key: 'domain',
					width: 150
				},
				{
					title: '系统名称',
					key: 'systemName',
					width: 150
				},
				{
					title: '设备名称',
					key: 'eventName',
					width: 400
				},
				{
					title: '设备类型',
					key: 'eventType',
					width: 400
				},
				{
					title: '检修日期',
					key: 'maintainDate',
					width: 350
				},
				{
					title: '检修内容',
					key: 'maintainContent',
					width: 300
				},
				{
					title: '检修人',
					key: 'maintainPerson',
					width: 150
				},
				{
					title: '维修方式',
					key: 'maintainWay',
					width: 150
				},
				{
					title: '工单状态',
					key: 'taskStatu',
					format: "已恢复0;处理中1;已搁置2;未处理3;已处理",
					width: 150
				},
				{
					title: '描述',
					key: 'describe',
					width: 800
				},
			],
			selectedRepairLogInfoIndex: -1,
			startTimes:[2010,6,1],
			endTime: 2100,
			show:false,
			targetInputData: ''
		}
	},
	methods: {
		// ------------------列表查询条件----------------------
		// 初始化下拉框
		initDoMain () {
			this.$myRequest({
				url: '/devStatus/getDomain'
			}).then(rep => {
				this.doMainList = rep.result
			})
		},
		initStationName() {
			this.$myRequest({
				url: '/devStatus/getStation'
			}).then(rep => {
				this.stationNameList = rep.result
			})
		},
		initStatu() {
			this.$myRequest({
				url: '/devStatus/getStatus'
			}).then(rep => {
				this.statuList = rep.result
			})
		},
		// 下拉框值改变事件
		doMainChange(e){
			if(e) {
				this.queryParam.doMain = e.newVal.label
				this.$myRequest({
					url: '/devStatus/getSystem?parentId='+ e.newVal.value,
				}).then(rep => {
					this.systemNameList = rep.result
					this.$refs.systemName.onClear()
					this.$refs.eventType.onClear()
				})
			} else {
				this.queryParam.doMain = ''
			}
		},
		systemNameChange(e){
			if(e) {
				this.queryParam.systemName = e.newVal.label
				this.$myRequest({
					url: '/devStatus/getDevice?parentId='+ e.newVal.value,
				}).then(rep => {
					this.eventNameList = rep.result
					this.$refs.eventType.onClear()
				})
			} else {
				this.queryParam.systemName = ''
			}
		},
		eventNameChange(e) {
			if(e) {
				this.queryParam.eventName = e.newVal.label
			} else {
				this.queryParam.eventName = ''
			}
		},
		stationNameChange(e) {
			if(e) {
				this.queryParam.stationName = e.newVal.label
			} else {
				this.queryParam.stationName = ''
			}
		},
		statuChange(e){
			if(e) {
				this.queryParam.statu = e.newVal.value
			} else {
				this.queryParam.statu = ''
			}
		},
		showQueryOptions() {
			this.$refs.queryOptions.open()
		},
		drawerChange (e) {
			if(e){
				this.queryParam.eid = ''
				this.queryParam.doMain = ''
				this.queryParam.systemName = ''
				this.queryParam.eventName = ''
				this.queryParam.stationName = ''
				this.queryParam.statu = ''
				this.queryParam.startDate = ''
				this.queryParam.endDate = ''
			}
		},
		
		// ------------------日期选择器----------------------
		// 取消事件
		cancel(){
		    this.close()
		},
		// 确认事件
		sure(e){
			this.queryParam[this.targetInputData] = e.a + '-' + e.b + '-' + e.c
		    // 输出 { year: 100100,month: 3,day: 23}
		},
		// picker显示
		showPop(event, paramName){
			this.targetInputData = paramName
		    this.show = true
		},
		// 关闭picker
		close(){
		    this.show = false
		},
		// ------------------列表相关----------------------
		// 查询表单提交
		queryFormSubmit (e) {
			let param = {}
			if(e){
				param = e.detail.value
				this.$refs.queryOptions.close()
			}
			param.doMain = this.queryParam.doMain
			param.systemName = this.queryParam.systemName
			param.eventName = this.queryParam.eventName
			param.stationName = this.queryParam.stationName
			param.statu = this.queryParam.statu
			this.$myRequest({
				url: '/et/maintain/getRecords',
				data: param,
				method: 'POST'
			}).then(rep => {
				this.repairLogInfoList = rep.data
				this.selectedRepairLogInfoIndex = -1
			})
		},
		tableSelect (selectList) {
			this.selectedRepairLogInfoIndex = selectList
		},
		//------------------------删除弹窗--------------------------------------------
		deleteRepairLogInfo () {
			if(this.selectedRepairLogInfoIndex > -1){
				this.$refs.popup.open()
			}
		},
		dialogConfirm(done) {
			uni.showLoading({
				title:"删除中，请稍等...",
				mask:true
			});
			let taskNum = this.repairLogInfoList[this.selectedRepairLogInfoIndex].taskNum
			this.$myRequest({
				url: '/et/maintain/deleteRecords?taskNums='+taskNum,
			}).then(rep => {
				if(rep.message === '删除成功'){
					this.$refs.popupMessage.open()
					this.queryFormSubmit()
				}
				uni.hideLoading()
			})
			// 需要执行 done 才能关闭对话框
			done()
		},
		dialogClose(done) {
			// 需要执行 done 才能关闭对话框
			done()
		},
		editRepairLogInfo () {
			if(this.selectedRepairLogInfoIndex > -1){
				uni.navigateTo({
					url:'./equipmentRecordEdit?repairLogInfo='+ encodeURIComponent(JSON.stringify(this.repairLogInfoList[this.selectedRepairLogInfoIndex]))
						+'&statuList='+encodeURIComponent(JSON.stringify(this.statuList)),
					success: res => {
						console.log('跳转成功');
					},
					fail: res => {
						console.log(res);
					},
				})
			}
		},
		addButtonClick () {
			uni.navigateTo({
				url:'./equipmentRecordAdd',
				success: res => {
					console.log('跳转成功');
				},
				fail: res => {
					console.log(res);
				},
			})
		}
	},
	components:{
		minPicker,
		minPopup,
		xflSelect,
		uniPopup,
		uniPopupMessage,
		uniPopupDialog,
		uniDrawer,
		uniIcons,
		uniFab
	},
	mounted() {
		this.queryFormSubmit()
		this.initDoMain()
		this.initStationName()
		this.initStatu()
	}
}
</script>

<style>
	
	.button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex: 1;
		height: 40px;
		margin: 0 15px;
	}
	
	.dataTable {
		padding: 0rpx 10rpx ;
	}
	
	.message {
		padding: 20rpx 20rpx 5rpx;
	}
</style>
